<template>
  <div>
    <van-nav-bar title="筛选条件">
      <template #left>
        <van-icon name="cross" size="18" @click="closeFilterWrap" />
      </template>
    </van-nav-bar>
    <div class="gridTitle">学历要求</div>
    <van-grid :column-num="3" :gutter="10">
      <van-grid-item @click="itemBtnClick($event)" text="全部" />
      <van-grid-item @click="itemBtnClick($event)" text="大专" />
      <van-grid-item @click="itemBtnClick($event)" text="本科" />
      <van-grid-item @click="itemBtnClick($event)" text="研究生" />
      <van-grid-item @click="itemBtnClick($event)" text="博士" />
    </van-grid>

    <div class="gridTitle">薪资待遇</div>
    <van-grid :column-num="3" :gutter="10">
      <van-grid-item @click="itemBtnClick($event)" text="全部" />
      <van-grid-item @click="itemBtnClick($event)" text="8k" />
      <van-grid-item @click="itemBtnClick($event)" text="10k" />
      <van-grid-item @click="itemBtnClick($event)" text="20k" />
      <van-grid-item @click="itemBtnClick($event)" text="30k" />
    </van-grid>

    <div class="filter_footer">
      <van-button type="primary">清除</van-button>
      <van-button type="info">确认</van-button>
    </div>
  </div>
</template>
<script>
import "../assets/reset_vant.css";

export default {
  name: "filterCond",
  data() {
    return {};
  },
  methods: {
    closeFilterWrap() {
      this.$emit("closeFilterWrap");
    },
    itemBtnClick($e) {
      let _txt = $e.target.innerText;
      let _cls = $e.target.getAttribute("class");
      let _clsArr = _cls.split(" ");
      let _is = false;
      for (let i = 0; i < _clsArr.length; i++) {
        if (_clsArr[i] == "van_grid_item_focus") {
          _clsArr.splice(i, 1);
          _is = true;
          break;
        }
        _is = false;
      }
      if (!_is) {
        _clsArr.push("van_grid_item_focus");
      }
      let _cls_txt = _clsArr.join(" ");
      $e.target.setAttribute("class", _cls_txt);
    },
  },
};
</script>
<style scoped>
.gridTitle {
  padding: 0.2rem 0.2rem;
  clear: both;
  font-size: 0.3rem;
  font-weight: bold;
}
.gridTitle label {
  font-weight: normal;
  font-size: 0.2rem;
  padding: 0 10px;
}
.filter_footer {
  text-align: center;
  margin-top: 1rem;
  width: 100%;
}
</style>